<!-- 卡片>消防供水 -->
<template>
  <div class="fire-water-supply">
    <div class="card-title" @click="jumpDeviceDetail">
      <span class="card-title-text">消防供水</span>
    </div>
    <div class="fire-water-items">
      <div class="fire-water-item">
        <div class="top-outer">
          <div class="top-inner"></div>
        </div>
        <div class="wrapper">
          <div class="vlister">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="wave"></div>
          <div class="wraper-text">
            <p>正常水箱</p>
            <p>{{normalNum}}</p>
          </div>
          <div class="wraper-img">
            <img src="../../assets/images/cards/icon-water2.png" alt />
          </div>
        </div>
        <div class="bottom-outer">
          <div class="bottom-inner"></div>
        </div>
      </div>
      <div class="fire-water-item">
        <div class="top-outer">
          <div class="top-inner"></div>
        </div>
        <div class="wrapper">
          <div class="vlister">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="wave"></div>
          <div class="wraper-text">
            <p>报警水箱</p>
            <p>{{alarmNum}}</p>
          </div>
          <div class="wraper-img">
            <img src="../../assets/images/cards/icon-water1.png" alt />
          </div>
        </div>
        <div class="bottom-outer">
          <div class="bottom-inner"></div>
        </div>
      </div>
      <div class="fire-water-item">
        <div class="top-outer">
          <div class="top-inner"></div>
        </div>
        <div class="wrapper">
          <div class="wave"></div>

          <div class="wraper-text">
            <p>故障水箱</p>
            <p>{{faultNum}}</p>
          </div>
          <div class="wraper-img">
            <img src="../../assets/images/cards/icon-water3.png" alt />
          </div>
        </div>
        <div class="bottom-outer">
          <div class="bottom-inner"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFireResMonitorInfoNew } from "@/api/firewater";
export default {
  props: {
    orgId: {
      default() {
        return false;
      }
    }
  },

  data() {
    return {
      faultNum: 0,
      alarmNum: 0,
      normalNum: 0,
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    };
  },
  methods: {
    getData() {
      getFireResMonitorInfoNew({
        orgIds: this.orgId || this.$store.state.userInfo.organizationIds,
        resType: 1
      }).then(res => {
        if (res.status === 200) {
          this.faultNum = res.data.faultNum;
          this.alarmNum = res.data.alarmNum;
          this.normalNum = res.data.normalNum;
        }
      });
    },
    // 设备详情
    jumpDeviceDetail() {
      let that = this
      that.$Ctl.enterDetail('EquipmentList', {
          orgId: that.orgId || that.$store.state.userInfo.organizationIds, // 联网单位Id
          systemId: 131
      })
    }
  },
  components: {},
  created() {
    let that = this
    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.fireWaterSupply_ws = that.getData
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped lang="scss">
// 报警水箱
$color1: rgba(226, 88, 88, 0.6); //水箱背景色
$color2: rgba(226, 88, 88, 0.5); //水箱上圆外层
$color3: rgba(226, 88, 88, 0.6); //水箱上圆内层
$color4: rgba(226, 88, 88, 0.2); //水箱下外
$color5: rgba(226, 88, 88, 0.6); //水箱下内
// 正常水箱
$color6: rgba(60, 131, 246, 0.6); //水箱背景色
$color7: rgba(60, 131, 246, 0.5); //水箱上圆外层
$color8: rgba(60, 131, 246, 0.6); //水箱上圆内层
$color9: rgba(60, 131, 246, 0.2); //水箱下外
$color10: rgba(60, 131, 246, 0.6); //水箱下内
//故障水箱
$color11: rgba(116, 116, 43, 0.8); //水箱背景色
$color12: rgba(236, 166, 86, 0.5); //水箱上圆外层
$color13: rgba(236, 166, 86, 0.6); //水箱上圆内层
$color14: rgba(236, 166, 86, 0.4); //水箱下外
$color15: rgba(236, 166, 86, 0.3); //水箱下内
@mixin waterCommon {
  position: relative;
  margin: 20px 0;
  width: 140px;
  height: 174px;
  border-radius: 140px/36px;
  overflow: hidden;
  background-color: rgba(139, 54, 74, 0.8);
  .top-outer {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 36px;
    border-radius: 140px/36px;
    background-color: rgba(352, 35, 91, 0.5);
    content: "";
    z-index: 400;
  }
  .top-inner {
    position: absolute;
    left: 17px;
    top: 6px;
    width: 106px;
    height: 24px;
    border-radius: 106px/24px;
    content: "";
    z-index: 500;
  }

  .bottom-outer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 140px;
    height: 44px;
    border-radius: 70px/22px;
    content: "";
    z-index: 200;
  }
  .bottom-inner {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 140px;
    height: 36px;
    border-radius: 70px/18px;
    content: "";
    z-index: 100;
  }
  .wrapper {
    width: 140px;
    height: 176px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -70px;
    margin-top: -88px;
    //transform: translate(-50%, -50%);
    border-radius: 5px;
    overflow: hidden;
    z-index: 300;
    .vlister {
      position: absolute;
      bottom: 10%;
      width: 100%;
      height: 100%;
      div {
        width: 3px;
        height: 3px;
        background: rgba(235, 235, 235, 0.8);
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        &:nth-child(1) {
          left: 15%;
          animation: waveBlister 6s infinite linear;
        }
        &:nth-child(2) {
          left: 30%;
          animation: waveBlister 3s infinite linear;
        }
        &:nth-child(3) {
          left: 45%;
          animation: waveBlister 4s infinite linear;
        }
        &:nth-child(4) {
          left: 60%;
          animation: waveBlister 5s infinite linear;
        }
        &:nth-child(5) {
          left: 75%;
          animation: waveBlister 2s infinite linear;
        }

        &:nth-child(6) {
          left: 90%;
          animation: waveBlister 6s infinite linear;
        }
      }
    }
    .wave {
      width: 280px;
      height: 287px;
      position: absolute;
      top: -25%;
      left: 50%;
      margin-left: -140px;
      margin-top: -160px;
      border-radius: 140px/130px;
      background: rgba(53, 35, 50, 0.75);
      animation: wavefire 3s infinite linear;
    }
    .wraper-text {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 26px;
      font-weight: 400;
      text-align: center;
      p {
        &:nth-child(1) {
          font-size: 16px;
        }
      }
    }
    .wraper-img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  @keyframes waveBlister {
    from {
      bottom: 0;
    }
    to {
      bottom: 20%;
    }
  }
  @keyframes wavefire {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(60deg);
    }
    50% {
      transform: rotate(90deg);
    }
    75% {
      transform: rotate(120deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }
  @keyframes waveScroll {
    0% {
      transform: rotate(0deg);
      top: -30%;
    }
    25% {
      transform: rotate(60deg);
      top: -20%;
    }
    50% {
      transform: rotate(90deg);
      top: -10%;
    }
    75% {
      transform: rotate(120deg);
      top: 0%;
    }
    100% {
      transform: rotate(180deg);
      top: 5%;
    }
  }
}
.fire-water-items {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 20px;
  .fire-water-item {
    @include waterCommon;
    &:nth-child(1) {
      background-color: $color6;
      .top-outer {
        background-color: $color7;
      }
      .top-inner {
        background-color: $color8;
      }
      .bottom-outer {
        background-color: $color9;
      }
      .bottom-inner {
        background-color: $color10;
      }
      .wave {
        top: -10%;
      }
      .wraper-text {
        color: #6bcaff;
        p {
          &:nth-child(1) {
            font-size: 16px;
            color: #a3bedd;
          }
        }
      }
    }
    &:nth-child(2) {
      margin: 0 20px;
      background-color: $color1;
      .top-outer {
        background-color: $color2;
      }
      .top-inner {
        background-color: $color3;
      }
      .bottom-outer {
        background-color: $color4;
      }
      .bottom-inner {
        background-color: $color5;
      }
      .wave {
        top: -30%;
        animation: waveScroll 4s infinite linear;
        animation-direction: alternate;
      }
      .wraper-text {
        color: #f14962;
        p {
          &:nth-child(1) {
            font-size: 16px;
            color: #a3bedd;
          }
        }
      }
    }
    &:nth-child(3) {
      background-color: $color11;
      .top-outer {
        background-color: $color12;
      }
      .top-inner {
        background-color: $color13;
      }
      .bottom-outer {
        background-color: $color14;
      }
      .bottom-inner {
        background-color: $color15;
      }
      .wave {
        display: none;
      }
      .wraper-text {
        color: #ffbc48;
        p {
          &:nth-child(1) {
            font-size: 16px;
            color: #a3bedd;
          }
        }
      }
    }
  }
}
</style>